<!--template_01 模板-->
<template>
  <!-- 信息录入 -->
  <div class="box boxHtml">
    <div class="next" v-if="isNew && isSurvey">
      <el-form
        class="addInfor"
        label-width="100px"
        size="small"
        :inline="true"
        ref="inforForm"
        :model="form"
      >
        <div class="form_wrap clearfix">
          <el-form-item label="产权人姓名:" prop="ownerName" class="input_wrap">
            <el-input v-model="form.ownerName"></el-input>
          </el-form-item>
          <el-form-item label="小区名:" prop="estateName" class="input_wrap">
            <el-input v-model="form.estateName"></el-input>
          </el-form-item>
          <el-form-item label="房屋新旧:" prop="oldNew" class="input_wrap">
            <el-input v-model="form.oldNew"></el-input>
          </el-form-item>
          <el-form-item
            label="建筑梯户数:"
            prop="houseHolds"
            class="input_wrap"
          >
            <el-input v-model="form.houseHolds"></el-input>
          </el-form-item>
          <el-form-item label="房屋楼层:" prop="houseFloor" class="input_wrap">
            <el-input v-model="form.houseFloor"></el-input>
          </el-form-item>
          <el-form-item label="物业费:" prop="propertyFee" class="input_wrap">
            <el-input v-model="form.propertyFee">
              <template slot="append">(元/m²)</template>
            </el-input>
          </el-form-item>
          <el-form-item label="建筑面积:" prop="area" class="input_wrap">
            <el-input v-model="form.area">
              <template slot="append">(m²)</template>
            </el-input>
          </el-form-item>
          <el-form-item label="房屋架构:" prop="structure" class="input_wrap">
            <el-input v-model="form.structure"></el-input>
          </el-form-item>
          <el-form-item label="房屋户型:" prop="model" class="input_wrap">
            <el-input v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="建成年限:" prop="age" class="input_wrap">
            <el-input v-model="form.age">
              <template slot="append">年</template>
            </el-input>
          </el-form-item>
          <el-form-item label="房屋状态:" prop="state" class="input_wrap">
            <el-input v-model="form.state"></el-input>
          </el-form-item>

          <el-form-item label="贝壳网咨询:" prop="conch" class="input_wrap">
            <el-input v-model="form.conch"></el-input>
          </el-form-item>
          <el-form-item label="有无车位:" prop="carport" class="input_wrap">
            <el-input v-model="form.carport"></el-input>
          </el-form-item>
          <el-form-item
            label="初评估总价:"
            prop="assessment"
            class="input_wrap"
          >
            <el-input v-model="form.assessment">
              <template slot="append">(万元)</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="房屋单价:"
            prop="housingPrice"
            class="input_wrap"
          >
            <el-input v-model="form.housingPrice">
              <template slot="append">(元)</template>
            </el-input>
          </el-form-item>
<!--          <el-form-item-->
<!--            label="装修情况:"-->
<!--            prop="renovation"-->
<!--            class="input_wrap"-->
<!--          >-->
<!--            <el-input v-model="form.renovation"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item
            label="特别说明:"
            prop="especially"
            class="input_wrap full"
          >
            <el-input
              v-model="form.especially"
              type="textarea"
              :autosize="{ minRows: 2 }"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="房屋配套:"
            prop="ancillary"
            class="input_wrap full"
          >
            <el-input
              v-model="form.ancillary"
              type="textarea"
              :autosize="{ minRows: 2 }"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="借款用途:"
            prop="purpose"
            class="input_wrap full"
          >
            <el-input v-model="form.purpose"></el-input>
          </el-form-item>
          <el-form-item label="还款来源:" prop="source" class="input_wrap full">
            <el-input v-model="form.source"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table" v-else>
      <el-row>
        <el-col :span="24">
          <span style="float: right"
            ><el-button type="primary" @click="showDia"
              >修改信息</el-button
            ></span
          >
        </el-col>
      </el-row>
      <div class="enterInfor">
        <table>
          <tr>
            <td rowspan="9" width="150" class="left">房屋信息</td>
            <td width="150" class="title">产权人姓名</td>
            <td>{{ form.ownerName }}</td>
            <td width="150" class="title">小区名</td>
            <td>{{ form.estateName }}</td>
            <td width="150" class="title">房屋新旧</td>
            <td>{{ form.oldNew }}</td>
          </tr>
          <tr>
            <td width="150" class="title">建筑楼梯户数</td>
            <td>{{ form.houseHolds }}</td>
            <td width="150" class="title">房屋楼层</td>
            <td>{{ form.houseFloor }}</td>
            <td width="150" class="title">物业费(元/m²)</td>
            <td>{{ form.propertyFee }}</td>
          </tr>
          <tr>
            <td width="150" class="title">房屋建筑面积(m²)</td>
            <td>{{ form.area }}</td>
            <td width="150" class="title">房屋架构</td>
            <td>{{ form.structure }}</td>
            <td width="150" class="title">房屋户型</td>
            <td>{{ form.model }}</td>
          </tr>
          <tr>
            <td width="150" class="title">建筑年限</td>
            <td>{{ form.age }}</td>
            <td width="150" class="title">房屋当前状态</td>
            <td>{{ form.state }}</td>
            <td width="150" class="title">贝壳网咨询</td>
            <td>{{ form.conch }}</td>
          </tr>
          <tr>
            <td width="150" class="title">有无车位</td>
            <td>{{ form.carport }}</td>
            <td width="150" class="title">初评估总价(万元)</td>
            <td>{{ form.assessment }}</td>
            <td width="150" class="title">房屋单价(元/m²)</td>
            <td>{{ form.housingPrice }}</td>
          </tr>
          <tr>
            <td width="150" class="title">房屋配套</td>
            <td >{{ form.ancillary }}</td>
            <td width="150" class="title">装修情况</td>
            <td>{{ form.renovation }}</td>
          </tr>
          <tr>
            <td width="150" class="title">特别说明</td>
            <td colspan="5">{{ form.especially }}</td>
          </tr>
          <tr v-if="showAdd">
            <td width="150" class="title">借款用途</td>
            <td colspan="5">{{ form.purpose }}</td>
          </tr>
          <tr v-if="showAdd">
            <td width="150" class="title">客户还款来源</td>
            <td colspan="5">{{ form.source }}</td>
          </tr>
        </table>
      </div>
    </div>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
    >
      <DiaInformation
        width="33.3%"
        :formData="form"
        ref="info"
      ></DiaInformation>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DiaInformation from "./DiaInfomation";
import { updateSurData } from "../../../src/assets/js/api";
export default {
  name: "Information",
  components: { DiaInformation },
  props: ["info", "showInput", "isNew", "id", "sStatus", "isSurvey", "showAdd","intro"],
  data () {
    return {
      form: {},
      next: false,
      dialogVisible: false,
      tbSurveyData:{},
    };
  },
  watch: {
    info: {
      //深度监听，可监听到对象、数组的变化
      handler (val) {
        if (val) {
          this.form = JSON.parse(JSON.stringify(val));
        }
      },
      deep: true //true 深度监听
    }
  },
  methods: {

    //弹窗确认
    submit () {
      this.updateData();
    },
    //更新数据
    updateData () {
      // console.log('--------',this.form)
      let data = this.$refs.info.form;
      // console.log('data:',data)
      data.sid = this.id;

      let tbSurveyData = {
        orderNum:this.intro.orderNum,
        renovation:data.renovation,
        tbSurveyData: data
      };

      updateSurData(tbSurveyData).then(() => {
        this.form = data;
        this.tbSurveyData=tbSurveyData;
        this.$message.success("更新成功");
        this.dialogVisible = false;
      });
    },
    //打开弹窗
    showDia () {
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped type="less">
.box {
  overflow: hidden;
}
.form_wrap {
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px 20px 0;
  margin-top: 20px;
}
.input_wrap {
  width: 25%;
  margin-right: unset;
  display: flex;
  float: left;
  height: 33px;
}
.full {
  width: 100%;
  margin-bottom: 15px;
  height: auto;
}
.input_wrap ::v-deep .el-form-item__content {
  flex: 1;
}
.input_wrap ::v-deep .el-select {
  width: 100%;
  line-height: 30px;
}
.input_wrap ::v-deep .el-input__inner {
  line-height: 30px;
  box-sizing: border-box;
}
.el-col {
  text-align: left;
}
.el-row {
  padding: 10px 0;
}
.el-button {
  height: 30px;
  line-height: 5px;
}
.elDia ::v-deep .el-dialog {
  width: 60% !important;
  margin-top: unset !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}
.enterInfor table {
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.enterInfor table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
